// page/progress-demo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    progress: 0.08
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    this.renderProgress('#progress');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

  

  // 获取view节点的宽度，高度及各种信息
//   var query = wx.createSelectorQuery();
// //选择id
// query.select('.demo').boundingClientRect(function (rect) {
// 	console.log(rect)
// }).exec();
  renderProgress(id) {
    const { progress } = this.data;
    const query = wx.createSelectorQuery();
    query.select(id)
      .fields({
        node: true,
        size: true
      })
      .exec(res => {
        const {
          width,
          height,
          node: canvas
        } = res[0];

        // 圆点
        const x = width / 2;
        const y = height / 2;

        // 半径
        const r = width - height > 0 ? height / 2 : width / 2;

        const ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#c7c00d';
        ctx.arc(x, y - 10 / 2, r - 10, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath()
        ctx.lineWidth = 10;
        ctx.strokeStyle = '#fec00b';
        ctx.arc(x, y - 10 / 2, r - 10, 1.5 * Math.PI, 1.5 * Math.PI + 2 * Math.PI * progress)
        ctx.stroke();
        ctx.closePath();
      });
  }
})